<template>
	<view>
		<view class="account-top">
			<image class="headPhoto" mode="aspectFit" src="../../static/headPhoto.png"></image>
			<view class="account-name">{{this.username}}</view>
			<view class="account-toInfo" @tap="toAccountInfo">查看详情-></view>
		</view>
		<view class="tools">
			<view style="padding-left: 10px;padding-top: 10px;">帮助中心</view>
			<view class="tools-content">
				<helpButton name="客户端网址" @tap="showLink">
					<slot>
						<fui-icon name="link"></fui-icon>
					</slot>
				</helpButton>
				<helpButton name="需求反馈">
					<slot>
						<fui-icon name="redpacket"></fui-icon>
					</slot>
				</helpButton>
				<helpButton name="巡检教程">
					<slot>
						<fui-icon name="help"></fui-icon>
					</slot>
				</helpButton>
				<helpButton name="巡检日历">
					<slot>
						<fui-icon name="calendar" @tap="toCalendar"></fui-icon>
					</slot>
				</helpButton>
				<helpButton name="修改密码" @tap="changePsd">
					<slot>
						<fui-icon name="edit"></fui-icon>
					</slot>
				</helpButton>
				<helpButton v-if="this.roleId === 0" name="地图管理">
					<slot>
						<fui-icon name="location" @tap="goToMap()"></fui-icon>
					</slot>
				</helpButton>
				<helpButton v-if="this.roleId === 0" name="NFC管理">
					<slot>
						<fui-icon name="mobile" @tap="nfcManage()"></fui-icon>
					</slot>
				</helpButton>
				<helpButton name="退出登录" @tap="toLogin">
					<slot>
						<image src="~@/static/logout.png" class="logout-image"></image>
					</slot>
				</helpButton>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getJsonData,
		changeData
	} from '@/common/file.js'
	export default {
		data() {
			return {
				username: '',
				roleId: uni.getStorageSync('roleId'),
				isShow: true,
				blueDeviceList: [],
			}
		},
		onShow() {
			this.username = uni.getStorageSync('userInfo').realName
			let x = 2;
			if (uni.getStorageSync('roleId') === 0) {
				x = 0;
				this.roleId = 0
			} else {
				this.roleId = 1
			}
			uni.setTabBarItem({
				index: x,
				visible: false
			})
			uni.setTabBarItem({
				index: x + 1,
				visible: false
			})
		},
		methods: {
			toAccountInfo() {
				console.log("查看账户详情")
				uni.navigateTo({
					url: "/pages/index/account/account"
				})
			},
			showLink() {
				console.log("显示网址")
				const webUrl = "http://106.53.100.120:8070"
				uni.showModal({
					content: `客户端请访问${webUrl}`,
					cancelText:"返回",
					confirmText:"复制地址",
					success(res) {
						if(res.confirm){
							uni.setClipboardData({
								data:webUrl,
								success() {
									uni.showToast({
										title:"复制成功",
										icon:"none"
									})
								}
							})
						}
					}
				})
			},
			toLogin() {
				uni.showModal({
					content: "确定要退出登录吗？",
					confirmColor: "#f55850",
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('roleId')
							console.log(uni.getStorageSync("userInfo"))
							console.log("退出登录")
							uni.navigateTo({
								url: "/pages/users/login"
							})
							let i = 4
							while (i >= 0) {
								uni.setTabBarItem({
									index: i,
									visible: true
								})
								i--
							}
						} else {
							console.log("取消退出登录")
						}

					}
				})
			},
			goToMap() {
				uni.navigateTo({
					url: "../map/mapManage/mapManage"
				})
			},
			toCalendar() {
				uni.navigateTo({
					url: "calendar/calendar"
				})
			},
			nfcManage() {
				uni.navigateTo({
					url: `/pages/nfc/nfc?isShow=${false}`
				})
			},
			changePsd() {
				uni.navigateTo({
					url: "/pages/users/findPsd"
				})
			},
		},
		onReady() {
			// uni.hideTabBar()

		}
	}
</script>

<style scoped>
	.account-top {
		background-color: white;
		height: 80px;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}

	.headPhoto {
		width: 60px;
		height: 60px;
		margin-right: 20px;
	}

	.account-name {
		width: 50%;
		font-size: 30px;
	}

	.account-toInfo {
		width: 30%;
	}

	.tools {
		height: 400px;
		background-color: white;
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
		border-radius: 20px;
	}

	.tools-content {
		display: flex;
		flex-wrap: wrap;
		padding: 20px;
		padding-top: 30px;
	}

	.logout-image {
		width: 37%;
		height: 33%;
	}


	.box {
		width: 100%;
		height: 400rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border: 2px solid dodgerblue;
	}

	.item {
		box-sizing: border-box;
		padding: 10rpx;
		border-bottom: 1px solid #ccc;
	}

	button {
		margin-bottom: 20rpx;
	}
</style>